<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./resources/templates/appTemplate.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:define name="firstname">
        <f:view>
            <h:outputText value="#{userSession.user.firstname}"/>
        </f:view>
    </ui:define>
    <ui:define name="lastname">
        <f:view>
            <h:outputText value="#{userSession.user.lastname}"/>
        </f:view>
    </ui:define>
    <ui:define name="email">
        <f:view>
            <h:outputText value="#{userSession.user.email}"/>
        </f:view>
    </ui:define>
    <ui:define name="content">
        <f:view>
            <script type="text/javascript"> 
                //<![CDATA[ 
                this.onload = function() {
                    $("#userID").css("display", "none");
                    $("#userID").fadeIn('slow');
                }
                //]]> 
            </script> 
            <h:form id="artistListForm" rendered="#{userSession.connected}">
                <p:contextMenu id="artistListContextMenu" for="artists" style="width: 280px;">
                    <p:menuitem value="Informations" ajax="true" update=":artistDetailForm:artistDetail" icon="ui-icon-search" oncomplete="artistDetailDialog.show()"/>
                </p:contextMenu>
                <h1><h:outputText value="Les artistes"/></h1>
                <p:commandButton icon="ui-icon-play" onclick="togglePlay();" value="Lire"/>
                <!--<p:commandButton icon="ui-icon-disk" onclick="savePlaylist();" value="Enregistrer playlist courante"/> -->
                <p:commandButton icon="ui-icon-refresh" onclick="reinit();" value="Réinitialiser lecteur"/>
                <p:dataTable id="artists" value="#{artistList.getAllArtists()}" var="artist" paginator="true" rows="25" widgetVar="artistsTable"
                             emptyMessage="Aucun artiste trouvé !" 
                             paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} Aller à la page {JumpToPageDropdown}" 
                             rowsPerPageTemplate="25, 50, 100"
                             rowKey="#{artist.id}" selection="#{artistList.artist}" selectionMode="single">
                    <p:ajax event="rowSelect" update=":artistListForm:artistListContextMenu" />
                    <p:ajax event="rowUnselect" update=":artistListForm:artistListContextMenu" />
                    <f:facet name="header">  
                        <p:outputPanel>  
                            <h:outputText value="Recherche sur toutes les colonnes : " />  
                            <p:inputText id="globalFilter" onkeyup="artistsTable.filter()" style="width:150px" />  
                        </p:outputPanel>  
                    </f:facet>
                    <p:column style="width:2%">  
                        <p:rowToggler />  
                    </p:column>  
                    <p:column style="width:5%;">
                        <p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playPlaylist('#{songList.addSlashes(artist.JSon)}');"/>
                    </p:column>
                    <p:column sortBy="#{artist.artistName}" filterBy="#{artist.artistName}">
                        <f:facet name="header">
                            <h:outputText value="Nom d'artiste"/><br/>
                        </f:facet>
                        <h:outputText value="#{artist.artistName}"/>
                    </p:column>
                    <p:column sortBy="#{artist.type}" filterBy="#{artist.type}">
                        <f:facet name="header">
                            <h:outputText value="Type"/><br/>
                        </f:facet>
                        <h:outputText value="#{artist.type}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Année de début"/><br/>
                        </f:facet>
                        <h:outputText value="#{artist.beginningYear}"/>
                    </p:column>
                    <f:facet name="footer">  
                        Total : #{fn:length(artistList.getAllArtists())} titres.  
                    </f:facet> 

                    <p:rowExpansion>  
                        <h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;"  
                                     styleClass=" ui-widget-content grid">  

                            <f:facet name="header">  
                                <p:graphicImage style="width: 150px;" value="#{artistList.artist.avatar}"/>  
                            </f:facet>  

                            <h:outputText value="Nom : " />  
                            <h:outputText id="model" value="#{artistList.artist.artistName}" />  

                            <h:outputText value="Type : " />  
                            <h:outputText id="year" value="#{artistList.artist.type}" />  

                            <h:outputText value="Année début : " />  
                            <h:outputText value="#{artistList.artist.beginningYear}"/>  

                            <h:outputText value="Genres :" />  
                            <ui:repeat value="#{artistList.artist.genres}" var="genre" varStatus="loopGenres">
                                    <h:outputText value="#{genre.label}"/>
                                    <h:outputText rendered="#{loopGenres.index ge 0 and loopGenres.index lt artistList.artist.genres.size() - 1}" value=", "/>
                            </ui:repeat>
                        </h:panelGrid>  
                        <table id="artistSongTable">
                            <thead>
                                <th></th>
                                <th></th>
                                <th>Titre</th>
                                <th>Album</th>
                                <th>Durée</th>
                                <th>Joué</th>
                            </thead>
                            <ui:repeat value="#{artistList.artist.musics}" var="song" varStatus="loop">
                                <tr>
                                    <td><h:graphicImage width="50" library="images" value="#{song.coverImage}" /></td>
                                    <td><p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playSongFromPlayList(#{song.id}, #{loop.index}, '#{songList.addSlashes(artistList.artist.JSon)}');"/></td>
                                    <td><h:outputText value="#{song.title}"/></td>
                                    <td><h:outputText value="#{song.album.title}"/></td>
                                    <td><h:outputText value="#{song.totalTimeStr}"/></td>
                                    <td><h:outputText value="#{song.nbTimesPlayed} fois"/></td>
                                    <td><h:outputText value="#{song.nbTimesPlayed} fois"/></td>
                                </tr>
                            </ui:repeat>
                        </table>
                    </p:rowExpansion>  

                </p:dataTable>
            </h:form>
            <h:form id="artistDetailForm">
                <p:dialog header="#{artistList.artist.artistName}" widgetVar="artistDetailDialog" resizable="false"  
                          width="1000" height="500" showEffect="clip" hideEffect="fold" id="artistDetail">  
                    <h:graphicImage width="100" library="images" value="#{artistList.artist.avatar}" />
                    <br/>
                    <p:commandButton icon="ui-icon-play" value="Tout lire" ajax="true" oncomplete="playPlaylist('#{songList.addSlashes(artistList.artist.JSon)}');"/>
                    <br/><br/>
                    <table id="playlistDescTable" style="width:90%;">
                        <thead>
                            <th>Nom</th>
                            <th>Type</th>
                            <th>Année début</th>
                            <th>Genres</th>
                        </thead>
                        <tr>
                            <td><h:outputText value="#{artistList.artist.artistName}"/></td>
                            <td><h:outputText value="#{artistList.artist.type}" /></td>
                            <td><h:outputText value="#{artistList.artist.beginningYear}" /></td>
                            <td>
                                <ui:repeat value="#{artistList.artist.genres}" var="genre" varStatus="loopGenres">
                                    <h:outputText value="#{genre.label}"/>
                                    <h:outputText rendered="#{loopGenres.index ge 0 and loopGenres.index lt artistList.artist.genres.size() - 1}" value=", "/>
                                </ui:repeat>
                            </td>
                        </tr>
                    </table>
                    <br/>
                    <h1>Titres de l'artiste</h1>
                    <br/>
                    <table id="artistSongTable">
                            <thead>
                                <th></th>
                                <th></th>
                                <th>Titre</th>
                                <th>Album</th>
                                <th>Durée</th>
                                <th>Joué</th>
                            </thead>
                            <ui:repeat value="#{artistList.artist.musics}" var="song" varStatus="loop">
                                <tr>
                                    <td><h:graphicImage width="50" library="images" value="#{song.coverImage}" /></td>
                                    <td><p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playSongFromPlayList(#{song.id}, #{loop.index}, '#{songList.addSlashes(artistList.artist.JSon)}');"/></td>
                                    <td><h:outputText value="#{song.title}"/></td>
                                    <td><h:outputText value="#{song.album.title}"/></td>
                                    <td><h:outputText value="#{song.totalTimeStr}"/></td>
                                    <td><h:outputText value="#{song.nbTimesPlayed} fois"/></td>
                                    <td><h:outputText value="#{song.nbTimesPlayed} fois"/></td>
                                </tr>
                            </ui:repeat>
                        </table>
                </p:dialog>
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>
